/**
 * Created by sq on 2016/12/7.
 */
var testdiv = document.getElementsByClassName('testdiv');
function setColor(color) {
    testdiv[0].style.backgroundColor = color;
}
function setWidth(mywidth) {
    testdiv[0].style.width = mywidth+'px';
}
function  setHeigh(myheigh) {
    testdiv[0].style.height = myheigh + 'px';
}


document.getElementById('setButton').onclick=function () {
    document.getElementById('blackDiv').style.display='block';
}

var buttons = document.getElementsByClassName('colorButton');
buttons[0].onclick=function () {
    setColor('red');
}
buttons[1].onclick=function () {
    setColor('yellow');
}
buttons[2].onclick=function () {
    setColor('blue');
}
buttons[3].onclick=function () {
    setWidth(200);
}
buttons[4].onclick=function () {
    setWidth(300);
}
buttons[5].onclick=function () {
    setWidth(400);
}
buttons[6].onclick=function () {
    setHeigh(200);
}
buttons[7].onclick=function () {
    setHeigh(300);
}
buttons[8].onclick=function () {
    setHeigh(400);
}

var cancel = document.getElementsByClassName('recover');
cancel[0].onclick=function(){
    setHeigh(100);
    setWidth(100);
    setColor('white');
}
cancel[1].onclick = function () {
    document.getElementById('blackDiv').style.display='none';
}